<template>
    <el-row :gutter="10" style="height:49%;">
        <el-col :span="12" style="">
            <div style="height: 100%;width: 100%;padding:0;background-color: #ffffff">
                <div class="block text-center">
                    <el-carousel style="height: 100%;">
                        <el-carousel-item v-for="item in imgs" :key="item" style="text-align:center">
                                <el-image :src="item" fit="fill" />
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </el-col>
        <el-col :span="12"  style="padding:0px;background-color: #ffffff">
            <ul id="toDoList" v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
                <li v-for="(item,i) in publicMsgs" :key="i" class="infinite-list-item">{{ item }}</li>
            </ul>
        </el-col>
    </el-row>
    <el-divider style="height:1%;padding: 0;margin: 0"/>
    <el-row :gutter="5"  style="height:50%;">
        <el-col :span="8">
            <div ref="ec" style="height:100%;width: 100%;padding:5px;background-color: white">

            </div>
        </el-col>
        <el-col :span="8">
            <div ref="ec2" style="height:100%;width: 100%;padding:5px;background-color: white">

            </div>
        </el-col>
        <el-col :span="8">
            <div ref="ec3" style="height:100%;width: 100%;padding:5px;background-color: white">

            </div>
        </el-col>
    </el-row>
</template>

<script setup>
    import request from '@/utils/request.js'
    import {ref,  reactive,onMounted} from 'vue'
    import * as echarts from 'echarts'
    let ec = ref(null)
    let ec2 = ref(null)
    let ec3 = ref(null)
    let imgs = ref([
        "https://img0.baidu.com/it/u=2164009758,4200721561&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=355673106,1614830790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
    ])
    let form =ref({})
    onMounted(function () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(ec.value);
        var myChart2 = echarts.init(ec2.value);
        var myChart3 = echarts.init(ec3.value);
        // 绘制图表
        let option = {
            xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        let option2 = {
            title: {
                text: '业务占比',
                subtext: '测试数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 548, name: '咨询' },
                        { value: 173, name: '投诉' },
                        { value: 15, name: '表扬' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        let option3 = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [
                {
                    name: 'Pressure',
                    type: 'gauge',
                    detail: {
                        formatter: '{value}'
                    },
                    data: [
                        {
                            value: 100,
                            name: '满意度'
                        }
                    ]
                }
            ]
        };
        option && myChart.setOption(option);
        option2 && myChart2.setOption(option2);
        option3 && myChart3.setOption(option3);
    })
    const publicMsgs = ref(["公告1","公告2","公告3",
        "公告4","公告6","公告7",])
    const load = () => {

    }
</script>

<style scoped>
    .infinite-list {
        height: 300px;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .infinite-list .infinite-list-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
        background: var(--el-color-primary-light-9);
        margin: 10px;
        color: var(--el-color-primary);
    }
    .infinite-list .infinite-list-item + .list-item {
        margin-top: 10px;
    }
    #toDoList::-webkit-scrollbar {
        width: 4px;
    }
    #toDoList::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        opacity: 0.2;
    }
    #toDoList::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
    }
</style>
